<template>
  <h1>详情界面</h1>
  <img :src="'http://localhost:8000/'+bed.image" alt="" width="100px"/>
  <p>床名字：{{bed.name}}</p>
  <p>描述：{{bed.description}}</p>
  <p>价格：{{bed.price}}</p>
  <el-button type="primary" @click="order1(bed.id)">
    预定
  </el-button>
</template>
<script setup>

import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import axios from "axios";
import router from "@/router/index.js";

const route = useRoute()
const id = route.query.id
console.log(id)
const bed = ref([])

const order1 = (id) => {
  console.log(id)
  router.push({path: '/register', query: {id: id}})
}


onMounted(() => {
  axios.get(`http://localhost:8000/app/bed/?id=` + id)
      .then(res => {
        console.log(res.data)
        bed.value = res.data.data
      })
})

</script>